<!-- 用户详细信息 -->
<template>
  <div class="main-wrapper">
    <el-form
      ref="dataForm"
      :model="userData"
      label-position="left"
      label-width="110px"
    >
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item label="用户名称">
            <span>{{ userData.name }}</span>
          </el-form-item>
          <el-form-item label="用户手机号">
            <span>{{ userData.phoneNo }}</span>
          </el-form-item>
          <el-form-item label="所在省市">
            <span>{{ userData.cityName }}</span>
          </el-form-item>
          <el-form-item label="服务等级">
            <span>{{ userData.serviceLevel }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="text-align: center;">
          <img class="avatar" :src="userData.avatar" />
        </el-col>
      </el-row>
      <el-form-item label="经营范围">
        <span>{{ userData.busiScope }}</span>
      </el-form-item>
      <el-form-item label="专业范围">
        <span>{{ userData.profScope }}</span>
      </el-form-item>
      <el-form-item label="自我推荐辞">
        <span>{{ userData.recommend }}</span>
      </el-form-item>
      <el-form-item label="统一信用代码">
        <span>{{ userData.idCode }}</span>
      </el-form-item>
      <el-form-item label="身份证">
        <el-image
          v-if="userData.imgUrl"
          class="cert-image"
          lazy
          :src="userData.imgUrl"
          :preview-src-list="[userData.imgUrl]"
        />
      </el-form-item>
      <el-form-item label="资质证书">
        <el-image
          v-for="imgUrl in userData.imgUrls"
          :key="imgUrl.id"
          class="cert-image"
          :src="imgUrl"
          :preview-src-list="userData.imgUrls"
        />
      </el-form-item>
      <el-form-item label="是否代理">
        {{ userData.agentType === 1? '是' : '否' }}
      </el-form-item>
      <el-form-item label="推荐人">
        <span>{{ userData.referrerUserId + ' - '+ (userData.referrerUserName || '无推荐人') }}</span>
      </el-form-item>
      <el-form-item label="推荐码">
        <span>{{ userData.referralCode }}</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>{{
          userData.createTime | timeFilter('{y}-{m}-{d} {h}:{i}')
        }}</span>
      </el-form-item>
      <el-form-item label="状态">
        <el-tag :type="userData.status | styleFilter()">{{
          userData.status | statusFilter()
        }}</el-tag>
      </el-form-item>
      <el-form-item label="详细介绍">
        <div class="detail" v-html="userData.detail" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <router-link to="/user/index"
        ><el-button @click="dialogFormVisible = false"
          >关闭</el-button
        ></router-link
      >
    </div>
  </div>
</template>

<script>
import { getImageUrl, parseTime } from '@/utils'
import { getUser } from '@/api/user'

export default {
  name: 'UserDetail',
  components: {},
  filters: {
    styleFilter(style) {
      const styleMap = { 1: 'success', 0: 'danger' }
      return styleMap[style]
    },
    timeFilter(time, format) {
      return parseTime(time, format)
    },
    statusFilter(value) {
      const statusMap = { 0: '无效', 1: '有效', 2: '锁定' }
      return statusMap[value]
    }
  },
  data() {
    return {
      statusOptions: [
        { key: 0, statusName: '无效' },
        { key: 1, statusName: '有效' }
      ],
      userData: {}
    }
  },
  // 生命周期 - 创建完成
  created() {
    const id = this.$route.params && this.$route.params.id
    this.fetchUser(id)
  },
  // 方法
  methods: {
    async fetchUser(id) {
      await getUser(id).then(res => {
        this.userData = res.data
        if (this.userData.avatar) {
          this.userData.avatar = getImageUrl(this.userData.avatar)
        }
        if (this.userData.imgUrl) {
          this.userData.imgUrl = getImageUrl(this.userData.imgUrl)
        }
        if (this.userData.imgUrls) {
          this.userData.imgUrls = this.userData.imgUrls.map(item => {
            return getImageUrl(item)
          })
        }
        if (this.userData.detail) {
          return getImageUrl(this.userData.detail)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// @import url(); // 引入公共css类
.main-wrapper {
  margin: 28px;
  .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid #f0f0f0;
  }
  .avatar:hover {
    border: 3px solid #f0f0f0;
  }
  .cert-image {
    width: 300px;
    height: 220px;
  }
  .detail {
    border: 1px solid #f0f0f0;
    padding: 0 10px;
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
